<template>
	<scroll-view class="Subject" show-scrollbar="false">
		<view class="status_bar">
		</view>
		<view class="content">
			<view class="index">
				<indexHeader></indexHeader>
			</view>
			<view class="top-white">
				<!-- 顶部留白 -->
			</view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<image src="/static/img1.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<image src="/static/img2.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<image src="/static/img3.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="middle">
				<view class="middle-1">
					<view class="middle-img">
						<image src="/static/img-tueijian.png" mode=""></image>
					</view>
					<view class="middle-text a1">热门推荐</view>
				</view>
				<view class="middle-1">
					<view class="middle-img">
						<image src="/static/img-remai.png" mode=""></image>
					</view>
					<view class="middle-text">本店热卖</view>
				</view>
				<view class="middle-1">
					<view class="middle-img">
						<image src="/static/img-youxian.png" mode=""></image>
					</view>
					<view class="middle-text">优选新品</view>
				</view>
				<view class="middle-1">
					<view class="middle-img">
						<image src="/static/img-baokuan.png" mode=""></image>
					</view>
					<view class="middle-text">网红爆款</view>
				</view>
				<view class="middle-1">
					<view class="middle-img">
						<image src="/static/img-tejia.png" mode=""></image>
					</view>
					<view class="middle-text">天天特价</view>
				</view>
			</view>
			
			<view class="commodity">
				<view class="commodity-list" v-for="(item, index) in commodityImg" :key="index">
					<view class="commodity-img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="commodity-text">
						<view>{{item.name}}</view>
					</view>
					<view class="commodity-text1">
						<view class="commodity-text1-1">{{item.money}}</view>
						<view class="commodity-text1-2">{{item.name1}}</view>
					</view>
					<view class="commodity-text2">
						<view class="commodity-text2-1" >{{item.money1}}</view>
						<view class="commodity-but">
							直接购买
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import indexHeader from './components/Header.vue'
	const indicatorDots = true
	const autoplay = true
	const interval = 2000
	const duration = 500
	
	const commodityImg = [
		{
			id: 1,
			name:"医用外科一次性防护口罩100只",
			name1:"加入购物车",
			money:"29.00",
			money1:"￥16.00",
			img:"/static/commodity-img1.png"
		},
		{
			id: 2,
			name:"小默药业阿胶OTC阿胶单盒装用于血虚萎黄…",
			name1:"加入购物车",
			money:"600.00",
			money1:"￥579.00",
			img:"/static/commodity-img2.png"
		},
		{
			id: 3,
			name:"蜂胶胶囊 0.38g/粒*12粒*8盒 礼袋 健…",
			name1:"加入购物车",
			money:"438.00",
			money1:"￥219.00",
			img:"/static/commodity-img3.png"
		},
		{
			id: 4,
			name:"小默强力片 15片/瓶*2瓶 免疫调节 抗疲劳…",
			name1:"加入购物车",
			money:"300.00",
			money1:"￥235.00",
			img:"/static/commodity-img4.png"
		},
		{
			id: 5,
			name:"沉香曲 3g/袋 用于表邪未尽 肝胃气滞 胸…",
			name1:"加入购物车",
			money:"30.00",
			money1:"￥21.50",
			img:"/static/commodity-img5.png"
		},
		{
			id: 6,
			name:"珍珠末 0.3g*20瓶/盒 安神 明目消翳 惊悸…",
			name1:"加入购物车",
			money:"600.00",
			money1:"￥579.00",
			img:"/static/commodity-img6.png"
		},
		{
			id: 7,
			name:"小金丸 用于痰气凝滞所致的瘰疬、瘿瘤…",
			name1:"加入购物车",
			money:"53.00",
			money1:"￥49.00",
			img:"/static/commodity-img7.png"
		},
		{
			id: 8,
			name:"铁皮石斛西洋参胶囊 增强免疫力成人中老…",
			name1:"加入购物车",
			money:"400.00",
			money1:"￥299.00",
			img:"/static/commodity-img8.png"
		},
		{
			id: 9,
			name:"西洋参口服液 增强免疫力 缓解体力疲劳…",
			name1:"加入购物车",
			money:"90.00",
			money1:"￥81.50",
			img:"/static/commodity-img9.png"
		},
		{
			id: 10,
			name:"小默药业阿胶OTC阿胶单盒装用于血虚萎黄…",
			name1:"加入购物车",
			money:"200.00",
			money1:"￥150.00",
			img:"/static/commodity-img10.png"
		}
		
	]
	
	
</script>

<style scoped>
	@import url(/pages/index/scss/index.css);
</style>